import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.css'
import { Checkbox } from 'antd'
import Link from '@docusaurus/Link'
import Translate from '@docusaurus/Translate'
import lockPhone from '/static/img/system-lock.png'
import MobileBackground from '@site/src/components/mobile/MobileBackground'
export default function MobileIntro(): React.JSX.Element {
  return (
    <header className={clsx('hero shadow--lw', styles.heroBanner)}>
      <div className="container">
        <div className="row">
          <div className={clsx('col col--6', styles.left_column)}>
            <div className={clsx('row')}>
              <div className="col">
                <p className="hero__title">
                  <Translate
                    id="component.mobile.MobileIntro.title"
                    description="the title of PolyOS Mobile page">
                    PolyOS Mobile
                  </Translate>
                </p>
                <p
                  className={clsx(
                    'hero__subtitle',
                    styles.show_text
                  )}>
                  <Translate
                    id="component.mobile.MobileIntro.subtitle"
                    description="the subtitle of PolyOS Mobile page">
                    PolyOS Mobile is an open-source operating system
                    tailored for RISC-V intelligent terminal devices.
                  </Translate>
                </p>
              </div>
            </div>
            <div className={clsx('row')}>
              <div className="col --12">
                <div className="hero__title">
                  <Translate
                    id="component.mobile.MobileIntro.supportPlatform.title"
                    description="the support platform section ">
                    Support Platform
                  </Translate>
                </div>
              </div>
            </div>
            <div className={clsx('row')}>
              <div className="col col--6">
                <div className={clsx('row')}>
                  <Checkbox checked className={styles.checkbox}>
                    <Translate
                      id="component.mobile.MobileIntro.supportPlatform.title.QEMU"
                      description="QEMU platform ">
                      QEMU
                    </Translate>
                  </Checkbox>
                </div>
                <div className={clsx('row', styles.center)}>
                  <Checkbox checked className={styles.checkbox}>
                    <Translate
                      id="component.mobile.MobileIntro.supportPlatform.title.QEMU.onLinux"
                      description="QEMU platform on GNU/Linux ">
                      QEMU on GNU/Linux
                    </Translate>
                  </Checkbox>
                </div>
                <div className={clsx('row')}>
                  <Checkbox checked className={styles.checkbox}>
                    <Translate
                      id="component.mobile.MobileIntro.supportPlatform.title.QEMU.onWindows"
                      description="QEMU platform on Windows ">
                      QEMU on Windows
                    </Translate>
                  </Checkbox>
                </div>
              </div>
            </div>
            <div className={clsx('row')}>
              <div className="col col--8">
                <Link
                  className={clsx(
                    'button button--primary button--lg',
                    styles.get_start_button
                  )}
                  to="/get-polyos">
                  <Translate
                    id="component.mobile.MobileIntro.button.getPolyOS.text"
                    description="Get PolyOS Mobile button on PolyOS Mobile page">
                    Get PolyOS Mobile now
                  </Translate>
                </Link>
              </div>
            </div>
          </div>
          <div
            className={clsx(
              'col col--5 col--offset-1',
              styles.center
            )}>
            <div className="row">
              <div className={clsx('col col--9')}>
                <MobileBackground image={lockPhone} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}
